<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="90px" class="app-content" :rules="rules" :model="ruleForm" 
        ref="ruleForm">
            <div class="box">
                <div class="appTitle">班级值日</div>
                <div class="appTop"><P>班级</p></div>
                <el-row :gutter="41" class='searchCon'>
                    <el-col :span="8" v-if="schoolType == '0'"> 
                        <el-form-item label="年级" prop="gradeId" >
                            <grade v-model="ruleForm.gradeId"
                            :isDefaultFill='true' 
                            @defaultFillGrade='defaultFillGrade'></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                            <getClass v-model="ruleForm.classId" 
                            :isDefaultFill='isDefaultFillClass' 
                             @defaultFillClass='defaultFillClass'
                            :grade='ruleForm.gradeId'
                            ></getClass>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8"> 
                        <el-button type="primary" @click="search('ruleForm')">查询</el-button>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="班级名称" prop='classId'>
                            <getClass v-model="ruleForm.classId" :schoolId='ruleForm.schoolId' @change="search('ruleForm')"></getClass>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <div class="appTop"><P>值日情况</p></div>
                <el-row v-show="tableStatus">
                    <div class="tableSmall" v-show="saveTableStatus=='1'">
                        <checkDuty ref='checkDuty' @madeEdite="madeEdite" :dataList.sync='dataList'></checkDuty>
                    </div>
                    <div class="tableSmall" v-show="saveTableStatus=='0'">
                        <editDuty :dataList.sync='dataList' ref='editDuty' @dataApply="dataApply"></editDuty>
                    </div>
                </el-row>
                <div class="footer" v-show="saveTableStatus=='0'">
                    <el-button type="primary"  @click="submitForm('ruleForm')" :loading="loadingBtn">保 存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import checkDuty from './comps/checkDuty';
import editDuty from './comps/editDuty';
import school from 'components/SchoolClasss/school';
import grade from 'components/SchoolClasss/grade';
import getClass from 'components/SchoolClasss/class1';
// import getClass from 'components/SchoolClasss/class2';
import { mapGetters } from 'vuex';
import { getClassDuty, saveClassDuty } from 'api/wisdom';
export default {
    name: 'classDuty',
    components: { Levelbar, checkDuty, editDuty, school, grade, getClass },
    data() {
        return {
            isDefaultFillClass: true, // 是否默认填充班级
            dataArr: [], // 编辑页 已有的值日列表
            dataArrid: [], // 编辑页 已有的值日列表
            saveTableStatus: '', // 默认是展示值日表,不是编辑的
            dataList: [], // 值日表的数据--也是发给后台的数据
            loadingBtn: false,
            tableStatus: false,
            onOff: true,
            ruleForm: {
                gradeId: '',
                classId: '',
                classType: '0' // 表格类型
            },
            rules: {
                gradeId: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ],
                classId: [
                    { required: true, message: '请选择班级', trigger: 'change' }
                ]
            }
        };
    },
    computed: {
        ...mapGetters(['schoolId', 'schoolName', 'schoolType'])
    },
    watch: {
        'ruleForm.classId': {
            handler(oldVal, newVal) {
                if (oldVal) {
                    if (this.onOff) {
                        this.$refs.editDuty.getStudent(this.ruleForm.classId); // 使编辑表 获取学生列表
                        this.getClassDutys();
                        this.onOff = false;
                        this.isDefaultFillClass=false;
                    }              
                }
            },
            immediate: true
            
        }
    },
    methods: {
    // 点击查询
    // 1:如果该班级是初次添加班级值日,则显示可编辑的页面
    // 2:否则,点击编辑按钮,则显示可编辑的页面,不点击编辑,则是保存好的状态页面
    // 表单查询
        search(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$refs.editDuty.getStudent(this.ruleForm.classId); // 使编辑表 获取学生列表                   
                    this.getClassDutys();
                }
            });
        },
        // 已有值日表
        getClassDutys() {
            getClassDuty(this.schoolId, this.ruleForm.classId).then(res => {
                // 填充
                this.dataArr.length=7;
                this.dataArr.fill('');
                this.dataArrid.length=7;
                this.dataArrid.fill('');
                let content=res.data.content;
                if (content === null) {// // 表示是初次添加值日
                    this.tableStatus = true;
                    this.madeEdite(); // 显示编辑
                } else {// 展示页
                    this.tableStatus = true;
                    this.saveTableStatus = '1'; 
                    let weekId=['sMonday', 'sTuesday', 'sWednesday', 'sThursday', 'sFriday', 'sSaturday', 'sSunday']
                    let weekName=['sMondayNames', 'sTuesdayNames', 'sWednesdayNames', 'sThursdayNames', 'sFridayNames', 'sSaturdayNames', 'sSundayNames'];
                    weekId.forEach((item, index) => {//  给编辑页展示的
                        Object.keys(content).forEach(val => {
                            if (val==item) {this.dataArrid[index]=content[val]}
                        })
                    })
                    weekName.forEach((item, index) => {// 给展示页
                        Object.keys(content).forEach(val => {
                            if (val==item) {this.dataArr[index]=content[val]}
                        })
                    })
                }
                this.$refs.checkDuty.getCheckDataApply(this.dataArr);// 展示到展示页面
            });
        },
    // 点击编辑按钮,变成可编辑状态
        madeEdite() {
            this.saveTableStatus = '0';
            this.$refs.editDuty.getFirstList(this.dataArrid);// 展示到编辑页
        },
        dataApply(e) {// 接受编辑好的数据
            this.dataList = e;
        },
    // 保存按钮
        submitForm(formName) {
            this.$confirm('确定要保存该值日表吗?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loadingBtn = true;
                this.$refs.editDuty.getDataApply(); // 使编辑好的数据更新到dataList
            // 把编辑好的列表填充上数据
                let weekId=['sMonday', 'sTuesday', 'sWednesday', 'sThursday', 'sFriday', 'sSaturday', 'sSunday']
                this.dataList.forEach((val, index) => {
                    weekId[index]=val.value?val.value.join(','):''
                })
                let fSchoolId = this.schoolId,
                    fClassId = this.ruleForm.classId,
                    sMonday = weekId[0],
                    sTuesday = weekId[1],
                    sWednesday = weekId[2],
                    sThursday = weekId[3],
                    sFriday = weekId[4],
                    sSaturday = weekId[5],
                    sSunday = weekId[6];
                saveClassDuty(fSchoolId, fClassId, sMonday, sTuesday, sWednesday, sThursday, sFriday, sSaturday, sSunday).then(res => {
                    this.$message.success('保存成功')
                    this.loadingBtn = false;
                    this.getClassDutys();// 重新获取新的值日表数据
                }).catch(() => {
                    this.loadingBtn = false;
                });
            }) 
        },
        defaultFillGrade(gradeId) {
            this.ruleForm.gradeId=gradeId;
        },
        defaultFillClass(classId) {
            this.ruleForm.classId=classId;
        }
        
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
    padding-bottom: 100px;
    .appTitle {
      padding-top: 8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .appTop {
      position: relative;
      font-size: 14px;
      color: rgb(106, 85, 72);
      padding-left: 16px;
      margin: 30px 0;
      display: block;
      &::after {
        position: absolute;
        content: "";
        width: 4px;
        height: 14px;
        background: #ff5e2c;
        left: 0;
        top: 3px;
      }
    }
    .box {
      padding: 0px 50px 0;
      background: #fff;
    }
    .footer {
      text-align: center;
      margin-top: 50px;
    }
    .tableSmall {
      width: 100%;
      min-height: 420px;
    }
    .tableBig {
      width: 100%;
      height: 560px;
    }
  }
}
</style>
